// import DemoB from "./pages/jsx/Demo02";
// import DemoC from "./pages/jsx/Demo03";
// import DemoD from "./pages/jsx/StateTest.jsx";
// import PackageDemo01 from './pages/jsx/PackageDemo01'
// import DemoA from "./todoList/jsx/TodoList02";
// import PersonPage from './pages/jsx/UseEffectDemo1'

import { HashRouter, Route, Routes, Link } from 'react-router-dom'
import MLLayout from '@/pages/layout/index';
import Login from '@/pages/login/index';
import Dashboard from '@/pages/dashboard/index';
import Good from '@/pages/good/goodList';
import User from '@/pages/user/index'
import { asyncRoutes } from '@/pages/index.jsx'

// accessRoutes 在vue-element-admin中 表示可以访问的路由
// 说白了 就是计算出来的路由
// 在这里 我们先考虑二级路由
// asyncRoutes总路由的文件
function createRoutes(asyncRoutes) {
    // 组件内需要的是数组
    let result = [];
    // 对总的路由进行遍历
    asyncRoutes.forEach(route => {
        // 如果路由有 path并且我有 element属性
        if (route.path && route.element) {
            // 将路由组件插入result
            result.push(
                // 路由组件要 key 要path 要属性
                <Route key={route.key} path={route.path} element={route.element}></Route>
            )
        }
        // 如果有children子元素
        if (route.children) {
            // 则对子元素进行遍历
            route.children.forEach((route) => {
                result.push(
                    <Route key={route.key} path={route.path} element={route.element}></Route>
                )
            })
        }
    });
    return result;
}
// console.log(createRoutes(asyncRoutes))
// 根组件
function App() {
    return (
        <div>
            <HashRouter>
                <Routes>
                    {/* 一级路由 不需要指定出口 */}
                    <Route path='/' element={<MLLayout />} >
                        {/* 二级路由 需要指定出口 */}
                        {/* <Route path='/dashboard' element={<Dashboard />}></Route>
                        <Route path='/good/list' element={<Good />}></Route>
                        <Route path='/user' element={<User />}></Route> */}
                        {
                            createRoutes(asyncRoutes)
                        }
                    </Route>
                    <Route path='/login' element={<Login />} />
                </Routes>
            </HashRouter>
        </div>
    )
}


export default App;